<template>
	<div class="aside-list" :class="{'active': active}">
		<span class="truncated">
			<slot />
		</span>
		<el-button class="ml-auto px-1" text type="primary" size="small" @click.stop="$emit('edit')">
			<el-icon :size="12">
				<Edit />
			</el-icon>
		</el-button>
		<el-popconfirm title="是否要删除该分类?" confirmButtonText="确认" cancelButtonText="取消" @confirm="$emit('delete')"> 
			<template #reference>
				<el-button class="px-1" text type="primary" size="small">
					<el-icon :size="12">
						<Close />
					</el-icon>
				</el-button>
			</template>
		</el-popconfirm>
	</div>
</template>

<script setup>
	import {
		Edit,
		Close
	} from '@element-plus/icons-vue' // 导入图标组件

	defineProps({
		active: {
			type: Boolean,
			default: false
		}
	})

	defineEmits(["edit", "delete"])
</script>

<style scoped>
	.aside-list {
		border-bottom: 1px solid #f4f4f4;
		cursor: pointer;
		@apply flex items-center p-3 text-sm text-gray-600;
	}

	.aside-list:hover,
	.active {
		@apply bg-blue-50;
	}
</style>